<template>
	<div class="vip_List">
		<!-- 会员中心 -->
		<div class='free_nav'>
			<router-link to="/layout/found"><img src="../../../assets/icon-close45.png"></router-link>			
			<span>会员中心</span>
		</div>
		<!-- ........................................................ -->
		<div class="vip_message">
			<div class='vip_center_left'>
				<div class='vip_center_pc'><img src="../../../assets/480.png"></div>
				<div class='vip_center_ft'>
					<h4>用户名称</h4>
					<p>非会员</p>
				</div>
			</div>
			<div class="vip_center_right">
				<button>开通会员</button>
			</div>
		</div>
		<!-- ........................................................................................ -->
		<div class='vip_center_youhui'>
			<h1>会员限时优惠</h1>
			<div class="vip_youhui_pc">
				<img src="../../../assets/36750.350.png">
			</div>
		</div>
		<!-- ..................................................................................... -->
		<div class="vip_specially">
			<h1>会员专享</h1>
			<div class='vip_specially_list' >
				<div class="vip_specially_left">
					<div class="vip_specially_pc"> 
						<img src="../../../assets/21100.png">
					</div>
					<div class="vip_specially_ft">
						<p>无损音乐专享</p>
					</div>
				</div>
				<div class="vip_specially_right">
					<img src="../../../assets/icon-next32.png">
				</div>
			</div>
			<div class='vip_specially_list' >
				<div class="vip_specially_left">
					<div class="vip_specially_pc"> 
						<img src="../../../assets/23100.png">
					</div>
					<div class="vip_specially_ft">
						<p>超清MV点播</p>
					</div>
				</div>
				<div class="vip_specially_right">
					<img src="../../../assets/icon-next32.png">
				</div>
			</div>
			<div class='vip_specially_list' >
				<div class="vip_specially_left">
					<div class="vip_specially_pc"> 
						<img src="../../../assets/0103.png">
					</div>
					<div class="vip_specially_ft">
						<p>双倍成长</p>
					</div>
				</div>
				<div class="vip_specially_right">
					<img src="../../../assets/icon-next32.png">
				</div>
			</div>
			<div class='vip_specially_list' >
				<div class="vip_specially_left">
					<div class="vip_specially_pc"> 
						<img src="../../../assets/22100.png">
					</div>
					<div class="vip_specially_ft">
						<p>精彩视频超清</p>
					</div>
				</div>
				<div class="vip_specially_right">
					<img src="../../../assets/icon-next32.png">
				</div>
			</div>
		</div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import musicPlayer from '../../../components/music_player'
	export default {
		name:'vipCenter',
		data(){
			return{
				
			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="Less">
.vip_List{
	width: 100%;
	padding-bottom: 98/100rem;
	overflow: hidden;
}
.free_nav{
	width: 100%;
	height: 88 / 100rem;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../../../assets/daohang.png');
	background-size: 100%;
}

.free_nav img{
	width: 40 / 100rem;
	height: 40 / 100rem;
	display: inline-block;
    margin-left: 20 / 100rem;
    margin-top:  26 / 100rem;

}
.free_nav span{
	display: inline-block;
	margin-left: 238 / 100rem;
	font-size: 36 / 100rem;
	color: #ffffff;
}
/*...............................................*/

.vip_message{
	width: 100%;
	height: 145 / 100rem;
	overflow: hidden;
	margin-top: 124 / 100rem;
}
.vip_message img{
	width: 145 / 100rem;
	height: 145 / 100rem;
}
.vip_center_left{
	float: left;
}
.vip_center_right{
	float: right;
}
.vip_center_pc,.vip_center_ft{
	float: left;
}
.vip_center_right{
	height: 145 / 100rem;
	margin-right: 20 / 100rem;
	line-height: 145 / 100rem;
}
.vip_center_pc{
	width: 145 / 100rem;
	height: 145 / 100rem;
	margin: 0 16/100rem 0 20/100rem;
}
.vip_center_ft h4{
   font-size: 30 / 100rem;
   color: #333333;
   margin-left: 16 / 100rem;
   margin-top: 30 / 100rem;
}
.vip_center_ft p{
	font-size: 24 / 100rem;
	margin-left: 34 / 100rem;
	color: #333333;
	margin-top:  26 / 100rem;
}
.vip_center_right{
	width:  152 / 100rem;
	height: 60 / 100rem;
}
button{
	width: 150 / 100rem;
	height: 60 / 100rem;
	color: #c995f5;
	font-size: 24 / 100rem;
	border: 1px solid #c995f5;
	border-radius: 20 / 100rem;
}
/*..............................................................*/
.vip_center_youhui{
	width: 100%;
	height: 410 / 100rem;
	margin-top: 84 / 100rem;
}
.vip_center_youhui h1{
	font-size: 30 / 100rem;
	color: #333333;
}
.vip_youhui_pc{
	width: 100%;
	height: 350 / 100rem;
	margin-top: 29 / 100rem;
}
.vip_youhui_pc img{
	width: 100%;
	height: 350 / 100rem;
}
.vip_center_youhui h1{
	margin-left: 20 /100rem;
}
/*..............................................................*/
.vip_specially{ 
	width: 100%;
	 margin-top: 32 / 100rem;
 }
.vip_specially h1{ margin-left: 20 / 100rem;  font-size: 30 / 100rem; color: #333333; margin-bottom: 27 / 100rem;}
.vip_specially_list{
	width: 710 / 100rem;
	height: 100 / 100rem; 
	margin: 0 auto;
	overflow: hidden;
	margin-bottom:5 / 100rem;
}
.vip_specially_left{
	float: left;
}
.vip_specially_right{
     float: right;
}
.vip_specially_ft,.vip_specially_pc{
	float: left;
}
.vip_specially_pc img{
	width: 100 / 100rem;
	height: 100 / 100rem;
}
.vip_specially_ft{
	height: 100 / 100rem;
	line-height: 100 / 100rem;
	margin-left: 12 / 100rem;
	color: #333333;
	font-size: 24 / 100rem;
}
.vip_specially_right{
	width: 20 / 100rem;
	height: 100 / 100rem;
	float: right;
	margin-top: 12 / 100rem;
	line-height: 100 / 100rem;
	margin-right: 10 / 100rem;
}
.vip_specially_right img{
	width: 20 / 100rem;
	height: 36 / 100rem;
}






</style>